<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="keywords" content="JRoll, 醉箩卜">
  <meta name="description" content="JRoll 2 是在JRoll第一版基础上重写JRoll滑动算法，基于时间运动，解决帧频降低时滑动缓慢的问题，更改横竖方向判断方法，使捕获横竖方向更准确灵敏。">
  <title>JRoll2 醉萝卜Ⅱ</title>
  <link href="http://www.chjtx.com/JRoll1/favicon.ico" type="image/x-icon" rel="icon">
  <link rel="stylesheet" href="./vendor/prism.css">
  <style>
    body {
      font-family: "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
      line-height: 1.75;
      margin-right: 150px;
      color: #333;
    }

    h1 {
      text-align: center;
      padding-bottom: 0.3em;
      font-size: 2em;
      padding-top: 44px;
    }

    p {
      text-indent: 2em;
      color: #222;
    }

    #menu_btn,
    #mask {
      display: none;
    }

    #left {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 200px;
      background: #fff;
      z-index: 2;
    }

    #menu {
      line-height: 1.8;
      overflow: auto;
      width: 200px;
      padding-left: 30px;
      padding-top: 30px;
    }

    li {
      list-style-type: none;
    }

    #menu a {
      color: #000;
      text-decoration: none;
    }

    #menu a.active {
      color: #da020c;
    }

    article {
      margin-left: 220px;
      margin-right: 20px;
    }

    pre[class*="language-"] {
      padding: 0 1em;
      border-radius: 0;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 10px;
    }

    tr:nth-child(2n) {
      background: #f1f1f1;
    }

    .green {
      background: green;
      color: #fff;
      font-size: 12px;
      padding: 2px 4px;
      margin-left: 10px;
    }

    .grey {
      background: #555;
      color: white;
      padding: 0 4px;
      margin-right: 10px;
    }

    .red {
      color: red;
    }

    li div {
      text-indent: 2em;
    }

    #logo {
      background: url(http://www.chjtx.com/JRoll1/images/logo.png) center no-repeat;
      background-size: 120px 120px;
      width: 200px;
      height: 160px;
      border-bottom: 1px dashed #ddd;
    }
    #ad {
      border: none;
      width: 100%;
      position: fixed;
      right: 10px;
      top: 138px;
      width: 120px;
      height: 600px;
    }
    .big {
      display: block;
    }
    .small {
      display: none;
    }
    #ad img {
      display: block;
      margin: 0 auto;
    }
    @media screen and (max-width: 768px) {
      #left {
        transform: translateX(-110%);
        transition: 300ms ease-out;
        z-index: 2;
      }
      #left.show {
        transform: translateX(0%);
      }
      article {
        margin-left: 20px;
      }
      body {
        margin-right: 0;
      }
      #menu_btn {
        display: block;
        position: fixed;
        color: #fff;
        background: #da020c;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        position: fixed;
        top: 53px;
        left: -10px;
        width: 55px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 14px;
        box-shadow: 3px 3px 10px 0px rgba(0,0,0,.4);
        transform: translateX(0);
        transition: 300ms ease-out;
        z-index: 3;
      }
      #menu_btn.hide {
        transform: translateX(-110%);
      }
      #mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.3);
      }
      #mask.show {
        display: block;
      }
      #ad {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px;
      }
      .big {
        display: none;
      }
      .small {
        display: block;
      }
    }
  </style>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?13d1748106859cff17352f69a8fa8457";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>

<body>
  <a target="_blank" href="https://github.com/chjtx/JRoll"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

  <div id="menu_btn">菜单</div>
  <div id="mask"></div>
  <div id="left">
    <div id="logo"></div>
    <menu id="menu">
      <li><a href="#summary">概述</a></li>
      <li><a href="#use">使用</a>
        <div><a href="#options">可选参数</a></div>
        <div><a href="#property">属性</a></div>
        <div><a href="#method">方法</a></div>
        <div><a href="#events">事件</a></div>
      </li>
      <li><a href="#senior">进阶</a></li>
      <li><a href="#download">下载</a></li>
      <li><a href="#plugins">插件</a></li>
      <li><a href="#extends">扩展</a></li>
      <li><a target="_blank" href="https://github.com/chjtx/JRoll/blob/master/README-LITE.md">JRoll Lite</a></li>
      <li><a target="_blank" href="http://www.chjtx.com/JRoll1/">JRoll 1</a></li>
    </menu>
  </div>
  <article class="language-js">
    <h1>醉萝卜 JRoll 2</h1>

    <h2 id="summary">概述</h2>
    看视频了解更多：<a href="https://v.youku.com/v_show/id_XMzk1MDY5MjIxMg==.html" target="_blank">JRoll大烩[捂脸]</a><br/>
    视频相关PPT下载：<a href="http://www.chjtx.com/JRoll/JRoll视频.pptx" download="JRoll视频.pptx">JRoll视频.pptx</a>

    <h3>说明</h3>
    <p>JRoll，一款能滚起上万条数据，具有滑动加速、回弹、缩放、滚动条、滑动事件等功能，兼容CommonJS/AMD/CMD模块规范，开源，免费的轻量级html5滚动插件。</p>
    <p>JRoll第二版是在JRoll第一版基础上重写JRoll滑动算法，基于时间运动，解决帧频降低时滑动缓慢的问题，更改垂直水平方向判断方法，使捕获垂直水平方向更准确灵敏。</p>
    <p>JRoll第二版增减了一些api不完全兼容JRoll第一版。</p>


    <h3>先睹为快</h3>
    <p><img width="160" height="160" src="./demos/images/qrcode.png"></p>
    <p><a target="_blank" href="http://www.chjtx.com/JRoll/demos/">http://www.chjtx.com/JRoll/demos/</a></p>
    <br/>

    <p><strong>注意：</strong> JRoll是独立插件，不需要依赖任何第三方库，Demo代码上引入了FastClick库是为了演示JRoll能和FastClick配合使用，因为IScroll5开启click:true后在IOS上与FastClick一起使用会导致单击事件需要双击才能触发的问题，与之对比JRoll不会有这个问题。</p>

    <h3>运行示例</h3>
    <p>请先安装 <a target="_blank" href="https://git-scm.com/downloads">git</a> 和 <a target="_blank" href="http://nodejs.cn/">nodejs</a></p>
<pre class="language-bash"><code>
#克隆仓库 Clone repository
git clone https://github.com/chjtx/JRoll.git

#进入项目 Go into project
cd JRoll

#安装express Install express
npm install -g express

#如果用苹果电脑，需要加sudo
#If on mac, use sudo
sudo npm install -g express

#运行 Run
node server.js
</code></pre>

    <p>然后在浏览器打开 localhost:3020/demos/</p>
    <br/>

    <h3>兼容性</h3>
    <ul>
      <li>[√] IOS 6+</li>
      <li>[√] Android 4.0+</li>
      <li>[√] Chrome</li>
      <li>[√] Firefox</li>
      <li>[√] IE 9+</li>
    </ul>
    <p>注意：JRoll专为移动应用度身设计，对PC浏览器的兼容只为方便开发调试，没作过多处理，因此强烈建议使用谷歌浏览器模拟器进行开发，在移动端使用。</p>
    <p>在UC浏览器上表现较差，作者已将UC浏览器定义为资讯类应用，非专业浏览器，不会专门去兼容它</p>

    <h3>引入</h3>
    <dl>
      <dt>npm</dt>
      <dd>
        <pre>
                    <code>
npm install jroll --save-dev
                    </code></pre>
      </dd>
      <dt>普通方式引入</dt>
      <dd>
        <pre>
                    <code>
&lt;script src='jroll.js'&gt;&lt;/script&gt;
                    </code></pre>
      </dd>
      <dt>CommonJS规范引入</dt>
      <dd>
        <pre>
                    <code>
var JRoll = require('jroll');
                    </code></pre>
      </dd>
      <dt>AMD规范引入（requireJS）</dt>
      <dd>
        <pre>
                    <code>
require(['jroll'], function(JRoll) {
    ...
});
                    </code></pre>
      </dd>
      <dt>CMD规范引入（seaJS）</dt>
      <dd>
        <pre>
                    <code>
seajs.use('jroll', function(JRoll) {
    ...
});
                    </code></pre>
      </dd>
    </dl>

    <h3>简单例子</h3>
    <dt>
            <dt>html代码</dt>
    <dd>
      <pre>
                    <code class="language-html">
&lt;div id="wrapper"&gt;
    &lt;ul id="scroller"&gt;
        &lt;li&gt;有一美人兮，见之不忘。&lt;/li&gt;
        &lt;li&gt;一日不见兮，思之如狂。&lt;/li&gt;
        &lt;li&gt;凤飞翱翔兮，四海求凰。&lt;/li&gt;
        &lt;li&gt;无奈佳人兮，不在东墙。&lt;/li&gt;
        &lt;li&gt;将琴代语兮，聊写衷肠。&lt;/li&gt;
        &lt;li&gt;何日见许兮，慰我彷徨。&lt;/li&gt;
        &lt;li&gt;愿言配德兮，携手相将。&lt;/li&gt;
        &lt;li&gt;不得於飞兮，使我沦亡。&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
                    </code></pre>
    </dd>
    <dt>css代码</dt>
    <dd>
      <pre>
                    <code class="language-css">
ul {margin: 0; padding: 0;}
li {line-height: 24px; margin-left: 24px;}
#wrapper {width: 200px; height: 100px; border: 1px solid;}
                    </code></pre>
    </dd>
    <dt>js代码</dt>
    <dd>
      <pre>
                    <code>
new JRoll("#wrapper");
                    </code></pre>
    </dd>
    </dt>

    <p><span style="color:red">【注意!!!】</span>wrapper的高度必须固定，而且应少于屏幕高度，才能使scroller正确滑动</p>

    <br/>

    <h2 id="use">使用</h2>
    <h3>如何使用</h3>
    <dl>
      <dd>
        <pre>
            <code>
var jroll = new JRoll(selector [, options]);
            </code></pre></dd>
    </dl>
    <p>selector是容器，可以是id选择器字符串<em>#wrapper</em>，也可以是dom对象<em>document.getElementById('wrapper')</em>，第二个参数是可选对象，该参数内容决定了创建一个怎样的JRoll对象</p>
    <dl>
      <dt>例：创建一个带垂直滚动条的对象</dt>
      <dd>
        <pre>
            <code>
var jroll = new JRoll("#wrapper", {scrollBarY:true});
            </code></pre></dd>
    </dl>
    <p>保存了JRoll对象后，可动态对部分可选参数进行修改</p>
    <dl>
      <dt>例：禁止回弹</dt>
      <dd>
        <pre>
            <code>
jroll.options.bounce = false;
            </code></pre></dd>
    </dl>

    <h3 id="options">可选参数</h3>
    <div style="width:100%;overflow-x:auto;">
      <table>
        <tr>
          <th width="120">可选值</th>
          <th width="120">默认值</th>
          <th>说明</th>
        </tr>
        <tr>
          <td>id</td>
          <td><em>[随机生成]</em></td>
          <td>id，jroll对象的唯一标记，建议手动提供id，方便在全局JRoll.jrollMap访问指定jroll对象，不提供时系统自动创建。</td>
        </tr>
        <tr>
          <td>scrollX</td>
          <td>false</td>
          <td>使能水平滑动<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>scrollY</td>
          <td>true</td>
          <td>使能垂直滑动<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>scrollFree</td>
          <td>false</td>
          <td>使能自由滑动，默认情况下，x方向在滑动时，y方向不能滑动，相反亦然，如果应用于对图片进行放大滑动，可将此参数设为true<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>minX</td>
          <td>0</td>
          <td>向左滑动的边界值<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>maxX</td>
          <td><em>[负scroller的宽]</em></td>
          <td>向右滑动的边界值<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>minY</td>
          <td>0</td>
          <td>向下滑动的边界值<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>maxY</td>
          <td><em>[负scroller的高]</em></td>
          <td>向上滑动的边界值<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>zoom</td>
          <td>false</td>
          <td>使能缩放<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>zoomMin</td>
          <td>1.0</td>
          <td>最小缩放倍数<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>zoomMax</td>
          <td>4.0</td>
          <td>最大缩放倍数<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>bounce</td>
          <td>true</td>
          <td>允许回弹<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>scrollBarX</td>
          <td>false</td>
          <td>开启水平滚动条，滚动页面超过两横屏时才会出现滚动条</td>
        </tr>
        <tr>
          <td>scrollBarY</td>
          <td>false</td>
          <td>开启垂直滚动条，滚动页面超过两竖屏时才会出现滚动条</td>
        </tr>
        <tr>
          <td>scrollBarFade</td>
          <td>false</td>
          <td>滚动条使用渐隐模式</td>
        </tr>
        <tr>
          <td>preventDefault</td>
          <td>true</td>
          <td>禁止touchmove默认事件</td>
        </tr>
        <tr>
          <td>momentum</td>
          <td>true</td>
          <td>开启滑动加速，惯性过渡<span class="green">可动态修改</span></td>
        </tr>
        <tr>
          <td>autoStyle</td>
          <td>true</td>
          <td>自动为wrapper和scroller添加样式</td>
        </tr>
        <tr>
          <td>autoBlur</td>
          <td>true</td>
          <td>v2.4.3新增，在滑动时自动将input/textarea失焦收起软键盘。设为false将会在IOS上出现光标不跟随输入框移动的现象</td>
        </tr>
        <tr>
          <td><del class="red">adjustTop</del></td>
          <td><del class="red">190</del></td>
          <td>从v2.2.0版本开始，JRoll删除了adjustTop选项，自动调整安卓机输入框位置的功能抽离到jroll-fixedinput.js里。<del class="red">安卓手机弹出软键盘时自动调整输入框位置，作者不建议使用该项，如遇软键盘遮挡输入框的情况，建议重新设计表单页面。参考：<a target="_blank" href="http://my.oschina.net/cjlice/blog/625526">WebAPP输入框被软键盘遮挡肿么办？</a></del></td>
        </tr>
        <tr>
          <td>scroller</td>
          <td><em>[wrapper的第一个子元素]</em></td>
          <td>指定scroller，不可动态更改，可以是id选择器字符串<em>#scroller</em>，也可以是dom对象<em>document.getElementById('scroller')</em></td>
        </tr>
        <tr>
          <td>edgeRelease</td>
          <td>true</td>
          <td>v2.4.7新增，边缘释放，滑动到上下边界自动结束，解决手指滑出屏幕没触发touchEnd事件的问题。如果手指滑动屏幕的速度过快该选项并不一定起作用</td>
        </tr>
      </table>
    </div>

    <h3 id="property">属性</h3>
    <dl>
      <dt><strong>id</strong></dt>
      <dd>
        JRoll对象的唯一标识符。
        <pre><code>
var jroll = new JRoll("#wrapper");
console.log(jroll.id);
                </code></pre>
      </dd>

      <dt><strong>jrollMap</strong></dt>
      <dd>
        对象，JRoll对象集合，保存了当前页面的所有JRoll对象。
        <pre><code>
console.log(JRoll.jrollMap);
                </code></pre>
      </dd>
    </dl>

    <h3 id="method">方法</h3>
    <dl>
      <dt><strong>refresh</strong><span class="green">支持链式调用</span></dt>
      <dd>
        当scroller或wrapper的高度发生变化时，需要用此方法对JRoll对象进行刷新
        <pre><code>
var jroll = new JRoll("#wrapper");
    //do something，例：动态修改scroller的内容，使scroller的高度发生变化
    jroll.refresh();
                </code></pre>
      </dd>

      <dt><strong>scrollTo</strong><span class="green">支持链式调用</span></dt>
      <dd>
        该方法用于移动scroller，共五个参数，第一个参数是x偏移量（必填），第二个是y偏移量（必填），第三个是滑动时间（可选，单位ms)，第四个是是否允许超出边界（可选，true/false），第五个回调方法（可选）。如果想获取当前x,y偏移量，可直接输出jroll.x和jroll.y
        <pre><code>
jroll.scrollTo(x, y [, duration , bool, callback])
        </code></pre>
        <pre><code>
var jroll = new JRoll("#wrapper");
    //200ms内滑动到0px, -100px位置
    jroll.scrollTo(0, -100, 200);
    //允许超出边界
    jroll.scrollTo(100, 100, 0, true);
    //回调
    jroll.scrollTo(0, 100, 400, false, function() {
        //滑动结束后执行
    });
                </code></pre>
      </dd>

      <dt><strong>scrollToElement</strong><span class="green">支持链式调用</span></dt>
      <dd>
        <pre><code>
jroll.scrollToElement(selector[, duration , bool, callback])
        </code></pre>
        滑动到指定元素，第一个参数为字符串或dom元素（必填且必须是scroller的子元素），第二个参数为滑动时间（可选），第三个是是否允许超出边界（可选，true/false），第四个回调方法（可选）
        <pre><code>
var jroll = new JRoll("#wrapper")
jroll.scrollToElement("#el", 300, false, function () { ... })
                </code></pre>
      </dd>

      <dt><strong>enable</strong><span class="green">支持链式调用</span></dt>
      <dd>
        使能滑动，使用disable禁止滑动后可用该方法重新开启
        <pre><code>
jroll.enable();
                </code></pre>
      </dd>

      <dt><strong>disable</strong><span class="green">支持链式调用</span></dt>
      <dd>
        使不能滑动
        <pre><code>
jroll.disable();
                </code></pre>
      </dd>

      <dt><strong>destroy</strong></dt>
      <dd>
        销毁jroll对象
        <pre><code>
jroll.destroy();
                </code></pre>
      </dd>

      <dt><strong>scale</strong><span class="green">支持链式调用</span></dt>
      <dd>
        缩放，只接受一个整型/浮点型参数
        <pre><code>
//放大1.5倍
jroll.scale(1.5);
                </code></pre>
      </dd>

      <dt><strong>call</strong></dt>
      <dd>
        在滑动时中转移对象，返回转移给的对象。适合于嵌套滑动时内层滑动到末尾开始滑动外层的场景。
        <pre><code>
/* 例：
 * jroll1在外层，包裹jroll2
 * jroll2在滑动到达指定条件时将滚动权交给jroll1
 */
var pos;
var jroll1 = new JRoll("#wrapper", {bounce:true});
var jroll2 = new JRoll("#inner", {bounce:true});
    jroll2.on("scrollStart", function() {
        pos = this.y;
    });
    jroll2.on("scroll", function(e) {
        if ((this.y-pos > 0 && pos === 0) || (this.y-pos < 0 && pos === this.maxScrollY)) {
            jroll2.call(jroll1, e); //返回jroll1
        }
    });
                </code></pre>
      </dd>
    </dl>

    <h3 id="events">事件</h3>
    <p>JRoll一共提供8个事件，每个事件都可多次添加行为。事件里的this指向jroll对象。</p>
    <dl>
      <dt><strong>scrollStart</strong></dt>
      <dd>
        滑动开始时执行
        <pre><code>
jroll.on("scrollStart", function() {
    console.log(this.x); //输出当前x偏移量，this指向jroll对象
});
                </code></pre>
      </dd>

      <dt><strong>scroll</strong></dt>
      <dd>
        滑动过程中执行
        <pre><code>
jroll.on("scroll", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>scrollEnd</strong></dt>
      <dd>
        滑动结束时执行
        <pre><code>
jroll.on("scrollEnd", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>touchEnd</strong></dt>
      <dd>
        用户释放手指时执行，早于scrollEnd晚于scroll事件
        <pre><code>
jroll.on("touchEnd", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>zoomStart</strong></dt>
      <dd>
        开始缩放时执行
        <pre><code>
jroll.on("zoomStart", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>zoom</strong></dt>
      <dd>
        缩放过程中执行
        <pre><code>
jroll.on("zoom", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>zoomEnd</strong></dt>
      <dd>
        缩放结束后执行
        <pre><code>
jroll.on("zoomEnd", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>

      <dt><strong>refresh</strong></dt>
      <dd>
        使用jroll.refresh()刷新后执行
        <pre><code>
jroll.on("refresh", function() {
    //该干嘛干嘛去...
});
                </code></pre>
      </dd>
    </dl>
    <br/>


    <h2 id="senior">进阶</h2>

    <h3>使用 scroller div 的 jroll 属性获取JRoll对象</h3>
    <pre><code class="language-html">
&lt;div id="w">
  &lt;div id="s">&lt;/div>
&lt;/div>
&lt;script>
var jroll = new JRoll('#w')
document.getElementById('s').jroll === jroll // true
&lt;/script>
    </code></pre>

    <h3>使用this.s判断当前滑动状态</h3>
    <pre><code>
var jroll = new JRoll("#wrapper");
jroll.on("scroll", function() {
    if (this.s === "scrollY") {
        //干点你想干的事情
    } else {
        //或者干点别的事情
    }
})
    </code></pre>

    <p>jroll.s中的s表示status，6种可能取值</p>

    <ul>
      <li>1. <span class="grey">null</span>初始状态，未进行任何滑动操作</li>
      <li>2. <span class="grey">preScroll</span>准备开始滑动</li>
      <li>3. <span class="grey">preZoom</span>准备开始缩放</li>
      <li>4. <span class="grey">scrollX</span>正在进行横向滑动</li>
      <li>5. <span class="grey">scrollY</span>正在进行竖向滑动</li>
      <li>6. <span class="grey">scrollFree</span>正在进行横竖方向滑动</li>
    </ul>

    <p>注意：JRoll v2.3.0以下版本的min压缩文件的jroll.s值用1、2、3、4、5表示preScroll、preZoom、scrollX、scrollY、scrollFree。在JRoll v2.3.0版本开始与未压缩版保持一致，当初真不应该为了节省那丁点字节取用数字压缩的。</p>

    <h3>判断是否滑动到底部</h3>
    <pre><code>
var jroll = JRoll("#wrapper");
jroll.on("scrollEnd", function() {
    if (this.y === this.maxScrollY) {
        console.log("已滑动到底部");
    }
});
    </code></pre>
    <p>有关jroll对象更多的属性请自行在浏览器控制台输出jroll对象查看。</p>

    <h3>自定义滚动条样式</h3>
    <p>只要scrollBarX/scrollBarY的值为字符串，即为开启自定义滚动条，需要自己写样式。</p>
    <p>滚动条对样式定位有些特殊要求，自定义滚动条大小、颜色时需要先将默认样式拷贝下来，再对 .jroll-ybar/.jroll-xbar 和 .jroll-ybtn/.jroll-xbtn 进行修改。</p>

    <pre><code>
var jroll = new JRoll("#wrapper", {
        scrollBarY: "custom",
        scrollBarFade: true
    });
    </code></pre>

    <h3>解决某些安卓机无法滑动非播放状态的&lt;video&gt;</h3>
    <p>如果您的页面需要播放视频，在某些安卓机下无法滑动&lt;video&gt;，可用以下方法解决。</p>

    <p>非播放状态的&lt;video&gt;其表现像controls一样无法捕获touchstart等事件，因此无法使用JRoll滑动，可使用透明div解决。</p>

    <pre class="language-html"><code>
&lt;div id="parent">
    &lt;video id="video" controls="controls">
        &lt;source src="./video.ogg" type="video/ogg">
    &lt;/video>
    &lt;div class="fixed-video-scroll">&lt;/div>
&lt;/div>
&lt;script>
var video = document.getElementById("video");
document.addEventListener("click", function(e) {
    if (e.target.className === "fixed-video-scroll") {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
})
&lt;/script>
    </code></pre>

    <ul>
      <li>1. 使#parent为相对定位，video的宽度为100%，高度可自动也可自己计算</li>
      <li>2. div.fixed-video-scroll绝对定位，覆盖video，高度为video的高度减去44px，确保不会遮挡controls</li>
      <li>3. 添加事件，点击div.fixed-video-scroll时执行播放或暂停操作</li>
    </ul>

    <h3>关于被软键盘遮挡input输入框的问题</h3>

    <p>评论框贴在底部随着软键盘升起而升起的功能似乎很受客户青睐，这一需求使用H5技术实现很是力不从心，fixed定位失效，第三方输入法不改变window高度致使input被遮挡，IOS自动移动input到错误位置等等问题成了最大的阻力。</p>

    <p><strong>现时比较可行的解决方案有：</strong></p>
    <ul>
      <li>1. 点击评论时弹出浮动窗，使输入框位于上半屏。</li>
      <li>2. 切换到新页面进行输入操作。</li>
    </ul>

    <p>这两种设计方案都巧妙地避开了输入框被软键盘遮挡的情况，可参考这篇文章<a target="_blank" href="https://my.oschina.net/cjlice/blog/625526">WebAPP输入框被软键盘遮挡肿么办？</a></p>

    <p>JRoll使用translate3d滑动页面，可监听input聚焦事件，使用scrollTo方法将输入框移动到可见位置，在Android机上可解决被遮挡的问题，详见<a target="_blank" href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-fixedinput">jroll-fixedinput组件</a></p>

    <br/>

    <h2 id="download">下载</h2>
    <em>建议：下载文件后将文件名版本号去掉，这样在JRoll有更新时只需要更新jroll.js文件，不需要更新引用jroll的文件。</em>
    <ul>
      <li><a target="_blank" download="jroll.js" href="./build/jroll.2.6.5.js">jroll.2.6.5.js</a>(35k)</li>
      <li><a target="_blank" download="jroll.min.js" href="./build/jroll.2.6.5.min.js">jroll.2.6.5.min.js</a>(16k)</li>
    </ul>
    <em>JRoll Lite 是JRoll的精简版，具体请查看</em><a target="_blank" href="https://github.com/chjtx/JRoll/blob/master/README-LITE.md">《JRoll Lite 使用说明》</a>
    <ul>
      <li><a target="_blank" download="jroll-lite.js" href="./build/jroll-lite.2.4.11.js">jroll-lite.2.4.11.js</a>(21k)</li>
      <li><a target="_blank" download="jroll-lite.min.js" href="./build/jroll-lite.2.4.11.min.js">jroll-lite.2.4.11.min.js</a>(10k)</li>
    </ul>
    <h3>版本日志</h3>
    <dl>
      <dt>v2.6.6（2020-04-11）</dt>
      <dd>
        <li>修复在ipad ios13中ua更改导致无法滑动的问题</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.5（2018-06-22）</dt>
      <dd>
        <li>优化v2.6.4解决的问题</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.4（2018-06-21）</dt>
      <dd>
        <li>修复当#wrapper和#scroller元素处理隐藏状态时执行refresh()导致maxScrollX和maxScrollX的值变成NaN的bug</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.3（2018-06-13）</dt>
      <dd>
        <li>优化滚动条，当开启了滚动条选项，且滚动页面超过两屏时才会出现滚动条</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.2（2018-06-13）</dt>
      <dd>
        <li>优化 scrollBarFade 选项，渐隐滚动条的出现时机</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.1（2018-03-20）</dt>
      <dd>
        <li>修复github issues-#63的问题，实例销毁后，惯性移动的me._step还继续被执行</li>
        <li>修复实例销毁后scroller的transform样式没清除的问题</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.6.0（2017-10-27）</dt>
      <dd>
        <li>更新回弹算法，回弹过程也会执行`jroll.on('scroll')`事件</li>
        <li>更新了《嵌套滑动》demo的判断方式</li>
        <li>修复`preventDefault`选项失效的问题，因v2.4.6版本加入了`style.touchAction = 'none'`样式解决微信端图片缩放卡死的问题，现只在zoom选项为true时才添加`touchAction`样式</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.5.1（2017-10-26）</dt>
      <dd>
        <li>scrollToElement方法支持超出边界和回调</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.5.0（2017-08-22）</dt>
      <dd>
        <li>添加scrollToElement方法</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.12（2017-07-06）</dt>
      <dd>
        <li>修改滑动判断逻辑，提升安卓的滑动体验</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.11（2017-06-12）</dt>
      <dd>
        <li>解决滑动过程中被第二个手指点击后无法滚动的问题。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.10（2017-05-11）</dt>
      <dd>
        <li>改善textarea有滑动条时的滑动体验。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.9（2017-04-25）</dt>
      <dd>
        <li>issues-17：放慢回弹速度，改善体验。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.8（2017-03-28）</dt>
      <dd>
        <li>修复issues-14里提到的bug，当内层jroll将滑动权交给外层jroll后，再次触碰不能停住外层jroll。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.7（2017-03-10）</dt>
      <dd>
        <li>添加 edgeRelease 选项开关，用于控制滑动到屏幕上下边界是否自动结束JRoll，默认为true。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.6（2017-03-09）</dt>
      <dd>
        <li>scroller添加touch-action:none样式，修复微信端缩放卡死的问题。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.5（2017-02-09）</dt>
      <dd>
        <li>去除Chrome56对document的addEventListener默认passive为true的警告。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.3（2016-12-16）</dt>
      <dd>
        <li>添加autoBlur可选项。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.4.2（2016-12-01）</dt>
      <dd>
        <li>修复缩放时scroller受translate偏移影响定位问题。</li>
        <li>修复防止重复多次new JRoll。</li>
        <li>添加zoomDuration选项，缩放结束后回到限定位置的过渡时间。</li>
        <li>注册事件jroll.on('scroll'...可链式调用。</li>
        <li>添加图片查看器插件JRollViewer。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.3.2（2016-10-23）</dt>
      <dd>
        <li>兼容IE 9+。</li>
        <li>优化滑动体验，bounce为false滑动到最大/最小值时重置计算开始点和结束点。</li>
        <li>添加仿QQ列表侧滑删除案例</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.3.0（2016-10-16）</dt>
      <dd>
        <li>支持PC浏览器（只为方便开发调试使用，并未在PC上作大量测试）。</li>
        <li>解决wrapper的padding和scroller的margin造成maxWidth/maxHeight计算错误的问题。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.2.1（2016-07-29）</dt>
      <dd>
        <li>优化滑动。</li>
        <li>utils工具添加IOS判断。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.2.0（2016-07-24）</dt>
      <dd>
        <li>防止按停滑动时误触a链接。</li>
        <li>废除adjustTop选项。</li>
        <li>抽离focusin/out到jroll-fixedinput组件。</li>
        <li>滑动时例input/textarea失焦。</li>
        <li>调整滑动数值。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.1.0（2016-07-01）</dt>
      <dd>
        <li>正式版!!!</li>
        <li>修复若干bug。</li>
        <li>调整滑动数值。</li>
        <li>使用requestAnimationFrame执行回弹，解决IOS在大量dom时使用transition回弹卡顿问题。</li>
        <li>textarea不出现滚动条时允许滚动JRoll实例。</li>
        <li>scrollTo方法添加第五个参数->回调方法。</li>
        <li>滚动条长度限制最小为8px。</li>
        <li>删除了g可选项，分阶段使用不同的系数值。</li>
      </dd>
    </dl>
    <dl>
      <dt>v2.0.0（2016-06-19）</dt>
      <dd>
        <li>上线!!!</li>
        <li>重写滑动算法，基于时间运动，解决帧频降低时滑动缓慢的问题。</li>
        <li>更改垂直水平方向判断方法，使捕获垂直水平向更准确灵敏。</li>
        <li>添加minX、maxX、minY、maxY选项。</li>
        <li>添加touchEnd事件。</li>
        <li>修改滚动条样式。</li>
        <li>删除scroll选项。</li>
      </dd>
    </dl>

    <br/>

    <h2 id="plugins">插件</h2>
    <h3>jroll-viewer.js 图集查看器</h3>
    <pre><code>npm i -D jroll-viewer</code></pre>
    <p>下载：<a href="./plugins/jroll-viewer/build/jroll-viewer.0.2.2.js" target="_blank" download>jroll-viewer.js</a>(13k) <a href="./plugins/jroll-viewer/build/jroll-viewer.0.2.2.min.js" target="_blank" download>jroll-viewer.min.js</a>(7k)</p>
    <p>说明：<a href="https://github.com/chjtx/JRoll/tree/master/plugins/jroll-viewer" target="_blank">JRollViewer 使用文档</a></p>

    <br/>

    <h2 id="extends">扩展</h2>
    <h3>jroll-pulldown.js 下拉组件</h3>
    <pre><code>npm i -D jroll-pulldown</code></pre>
    <p>下载：<a href="./extends/jroll-pulldown/build/jroll-pulldown.1.0.0.js" target="_blank" download>jroll-pulldown.js</a>(9k) <a href="./extends/jroll-pulldown/build/jroll-pulldown.1.0.0.min.js" target="_blank" download>jroll-pulldown.min.js</a>(6k)</p>
    <p>说明：<a href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-pulldown" target="_blank">jroll-pulldown 使用文档</a></p>

    <h3>jroll-infinite.js 无限加载组件</h3>
    <pre><code>npm i -D jroll-infinite</code></pre>
    <p>下载：<a href="./extends/jroll-infinite/build/jroll-infinite.2.2.0.js" target="_blank" download>jroll-infinite.js</a>(7k) <a href="./extends/jroll-infinite/build/jroll-infinite.2.2.0.min.js" target="_blank" download>jroll-infinite.min.js</a>(3k)</p>
    <p>详情：<a href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-infinite" target="_blank">jroll-infinite 使用文档</a></p>

    <h3>jroll-fixedinput.js 固定输入框</h3>
    <pre><code>npm i -D jroll-fixedinput</code></pre>
    <p>下载：<a href="./extends/jroll-fixedinput/build/jroll-fixedinput.1.2.3.js" target="_blank" download>jroll-fixedinput.js</a>(2k) <a href="./extends/jroll-fixedinput/build/jroll-fixedinput.1.2.3.min.js" target="_blank" download>jroll-fixedinput.min.js</a>(1k)</p>
    <p>详情：<a href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-fixedinput" target="_blank">jroll-fixedinput 使用文档</a></p>

    <h3>jroll-vue-infinite2.js 下拉刷新+无限加载 for Vue2（第二版）</h3>
    <pre><code>npm i -D jroll-vue-infinite2</code></pre>
    <p>下载：<a href="./extends/jroll-vue-infinite2/jroll-vue-infinite2.js" target="_blank" download>jroll-vue-infinite2.js</a>(3k)</p>
    <p>详情：<a href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-vue-infinite2" target="_blank">jroll-vue-infinite2 使用文档</a></p>

    <h3>jroll-vue-infinite.js 下拉刷新+无限加载 for Vue2</h3>
    <pre><code>npm i -D jroll-vue-infinite</code></pre>
    <p>下载：<a href="./extends/jroll-vue-infinite/jroll-vue-infinite.js" target="_blank" download>jroll-vue-infinite.js</a>(2k)</p>
    <p>详情：<a href="https://github.com/chjtx/JRoll/tree/master/extends/jroll-vue-infinite" target="_blank">jroll-vue-infinite 使用文档</a></p>

    <br/>
    <br/>
    <h3>JRoll插件与扩展的区别</h3>
    <p><em>插件：依赖JRoll，有独立的全局变量名，例`new JRollViewer(...)`</em></p>
    <p><em>扩展：依附JRoll，作为JRoll实例的方法存在，例`var jroll=new JRoll(...); jroll.pulldown(...)`</em></p>

    <p style="text-align:center;margin-top:100px;margin-bottom:58px;color:#ccc;">&copy;2015-2018 chjtx.com</p>

  </article>
  <script src="./vendor/prism.js"></script>
  <script>
    setTimeout(function() {
      var alist = document.querySelectorAll("menu a");
      var hrefs = [];
      var offsets = [];
      
      var menu = document.getElementById('menu')
      var left = document.getElementById('left')
      var mask = document.getElementById('mask')
      var menu_btn = document.getElementById('menu_btn')

      Array.prototype.forEach.call(alist, function(a) {
        var h = a.hash;
        if (h.indexOf("#") !== -1) {
          hrefs.push(h.replace("#", ""));
        }
      });
      hrefs.forEach(function(o) {
        var d = document.getElementById(o);
        if (d) {
          offsets.push(d.offsetTop);
        }
      });

      function setMenuTag() {
        var t = window.scrollY + 90;
        for (var i = offsets.length - 1; i >= 0; i--) {
          if (t > offsets[i]) {
            Array.prototype.forEach.call(alist, function(a) {
              a.classList.remove("active");
            });
            alist[i].classList.add("active");
            break;
          }
        }
      };
      setMenuTag();
      window.onscroll = setMenuTag;

      function showMenu () {
        left.classList.add('show')
        mask.classList.add('show')
        menu_btn.classList.add('hide')
      }
      function hideMenu () {
        left.classList.remove('show')
        mask.classList.remove('show')
        menu_btn.classList.remove('hide')
      }
      menu.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
          hideMenu()
        }
      })
      menu_btn.addEventListener('click', function () {
        showMenu()
      }, false)
      mask.addEventListener('click', function () {
        hideMenu()
      }, false)
    }, 300);
  </script>
  <div id="ad">
    <a class="big" target="_blank" href="https://www.taptap.com/app/174349">
      <img src="http://www.chjtx.com/assets/images/gg-big3.jpg">
    </a>
    <a class="small" target="_blank" href="https://www.taptap.com/app/174349">
      <img src="http://www.chjtx.com/assets/images/gg-small3.jpg">
    </a>
  </div>
</body>

</html>
